<script>
export default {
    name: "main",
    data() {
        return {
            list: [{
                ch1: 'Aa', pron1: 'wav/a.wav',
                ch2: 'Bb', pron2: 'wav/b.wav',
            }, {
                ch1: 'Cc', pron1: 'wav/c.wav',
                ch2: 'Dd', pron2: 'wav/d.wav',
            }, {
                ch1: 'Ee', pron1: 'wav/e.wav',
                ch2: 'Ff', pron2: 'wav/f.wav',
            }, {
                ch1: 'Gg', pron1: 'wav/g.wav',
                ch2: 'Hh', pron2: 'wav/h.wav',
            }, {
                ch1: 'Ii', pron1: 'wav/i.wav',
                ch2: 'Jj', pron2: 'wav/j.wav',
            }, {
                ch1: 'Kk', pron1: 'wav/k.wav',
                ch2: 'Ll', pron2: 'wav/l.wav',
            }, {
                ch1: 'Mm', pron1: 'wav/m.wav',
                ch2: 'Nn', pron2: 'wav/n.wav',
            }, {
                ch1: 'Oo', pron1: 'wav/o.wav',
                ch2: 'Pp', pron2: 'wav/p.wav',
            }, {
                ch1: 'Qq', pron1: 'wav/q.wav',
                ch2: 'Rr', pron2: 'wav/r.wav',
            }, {
                ch1: 'Ss', pron1: 'wav/s.wav',
                ch2: 'Tt', pron2: 'wav/t.wav',
            }, {
                ch1: 'Uu', pron1: 'wav/u.wav',
                ch2: 'Vv', pron2: 'wav/v.wav',
            }, {
                ch1: 'Ww', pron1: 'wav/w.wav',
                ch2: 'Xx', pron2: 'wav/x.wav',
            }, {
                ch1: 'Yy', pron1: 'wav/y.wav',
                ch2: 'Zz', pron2: 'wav/z.wav',
            }]
        };
    }
}
</script>

<template>
    <table class="table">
        <thead>
        <th scope="col" style="width: 100px;">字母</th>
        <th scope="col">发音</th>
        <th scope="col" style="width: 100px;">字母</th>
        <th scope="col">发音</th>
        </thead>
        <tbody>
        <tr v-for="item in list">
            <td class="vcenter">{{ item.ch1 }}</td>
            <td>
                <audio v-bind:src="item.pron1" controls></audio>
            </td>
            <td class="vcenter">{{ item.ch2 }}</td>
            <td>
                <audio v-bind:src="item.pron2" controls></audio>
            </td>
        </tr>
        </tbody>
    </table>
</template>

<style scoped>
.vcenter {
    vertical-align: middle;
}
</style>
